<template>
	<view class="content">
		<!-- 头部区域--搜索框 -->
		<view class="search-bar">
			<view class="search-bar-box">
				<image class="search-span" src="../../static/search.png" />
				<input type="text" value="" placeholder="请输入搜索内容" class="search-text" maxlength="10"
					@click="toclassification" />
				<button class="search-btn">搜索</button>
				<!-- v-model="this.getdata" -->
			</view>
		</view>
		<!-- 轮播图 -->
		<view>
			<swiper circular indicator-dots autoplay class="swiper">
				<swiper-item class="swiperitem">
					<image
						src="https://lnu-market.oss-cn-guangzhou.aliyuncs.com/2023-03-29/23:14:13-730e138d867e4ba2bcb20a7abe514154.jpg">
					</image>
				</swiper-item>
				<swiper-item class="swiperitem">
					<image
						src="https://lnu-market.oss-cn-guangzhou.aliyuncs.com/2023-03-29/23:14:50-c1b777ea7c4044ebb8dd739351458505.jpg">
					</image>
				</swiper-item>
				<swiper-item class="swiperitem">
					<image
						src="https://lnu-market.oss-cn-guangzhou.aliyuncs.com/2023-03-29/23:15:05-1b61ef58efad407a9b7dd3909969a170.jpg">
					</image>
				</swiper-item>
			</swiper>
		</view>
		<!-- navigation -->
		<view class="navigation">
			<view class="leftnav" @click="torelease">
				<view class="looking">
					失物招领
				</view>
				<view class="smallbox">
					点击查看
				</view>
				<view class="img">
					<image src="../../static/book.png" mode=""></image>
				</view>
			</view>
			<view class="rightnav" @click="toConfessionwall">
				<view class="Confessionwall">
					表白墙
				</view>
				<view class="leftsmallbox">
					点击查看
				</view>
				<view class="leftimg">
					<image src="../../static/Envelope.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- goods -->
		<view class="goods width">
			<view class="goodstop">
				商品列表
			</view>
			<view class="goodsbox">
				<view class="goodscard" @click="toDetails(index)" v-for="(arr,index) in allGoods" key="index">

					<view class="cardsimg" v-if="arr.urlList.length!==0">
						<image :src="arr.urlList[0]" mode=""></image>
					</view>
					<view class="cardsimg" v-if="arr.urlList.length===0">
						<image
							src="https://lnu-market.oss-cn-guangzhou.aliyuncs.com/2022-11-07/15:43:54-fe09117846af4ed4ba97375a2dfc7612.jpg"
							mode=""></image>
					</view>
					<view class="cardstext">
						{{arr.title != '' ? arr.title : "无标题"}}
					</view>
					<view class="price">
						￥{{arr.price}}
					</view>
					<view class="cardsuser">
						{{arr.userName}}
					</view>

				</view>

			</view>
			<uni-section title="指定加载图标样式 - 环形" type="line" @click="onchange">
				<uni-load-more iconType="circle" :status="status" />

			</uni-section>
		</view>



	</view>
</template>

<script>
	import {
		apiGetAll,
		apiGetAllPosts
	} from '@/utils/request/api.js'

	export default {

		data() {
			return {
				status: 'more',
				userName: '一条咸鱼咸鱼喜爱与',
				price: '666',
				getdata: '',
				allGoods: [],
				gid: 0,
				pageInfo: {
					pageNum: 1,
					pageSize: 10
				},
				scrollInfo: {
					current: 0,
					end: 0
				}
			}
		},
		onLoad() {
			apiGetAllPosts({
				id: 1,
				pageNum: 1,
				pageSize: 10
			}).then(res => {
				console.log(res);
				this.allGoods = res.data
				console.log(this.allGoods);


				// console.log(newLists);
			}).catch(err => {
				console.log(err);
			})
		},

		onReachBottom() {
			// 让页码值自增 +1
			console.log("已经到底咯，刷新下一页");
			this.pageInfo.pageNum += 1
			// 重新获取列表数据
			apiGetAllPosts({
				id: 1,
				pageNum: this.pageInfo.pageNum,
				pageSize: 10
			}).then(res => {

				this.allGoods.push(...res.data)
				// console.log(res.data);
				if (res.data.length === 0) {
					this.status = 'nomore'
					// console.log(this.status);
				}
				// console.log(newLists);
			}).catch(err => {
				console.log(err);
			})
		},
		onPullDownRefresh() {
			console.log('触发了下拉刷新')
			setTimeout(() => {
				uni.stopPullDownRefresh()
				this.$router.go(0)
			}, 1000)
		},
		methods: {
			toclassification() {
				uni.navigateTo({
					url: '../classification/classification'
				})
			},
			torelease() {
				uni.navigateTo({
					url: '../lostofdynamic/lostofdynamic'
				})
			},
			toConfessionwall() {
				uni.navigateTo({ //表白墙
					url: '../loveWallDynamic/loveWallDynamic'
				})
			},
			toDetails(index) {
				// console.log(this.allGoods[index].gid);
				this.gid = this.allGoods[index].gid
				// console.log(this.gid);
				uni.navigateTo({
					url: '../details/details?gid=' + this.gid
				})
			},
			toclassification() {
				uni.navigateTo({
					url: '../classification/classification'
				})
			},
			handleScroll() {

			}

		},
		mounted() {

		},
		filters: {
			// numFilter(value) {
			// 	// 截取当前数据到小数点后两位
			// 	const realVal = Number(value).toFixed(2)
			// 	return realVal+"yuan"
			// }
		}
	}
</script>

<style>
	page {
		background-color: rgb(242, 242, 242);
		padding-top: 40px;
	}

	.search-bar {
		width: 100%;
		height: 100rpx;
		margin-top: 3%;
	}

	.search-bar-box {
		display: flex;
		margin: 0 auto;
		width: 620rpx;
		height: 70rpx;
		border: 5rpx solid #00a8cc;
		border-radius: 50rpx;
	}

	.search-span {
		width: 15%;
		height: 56rpx;
		margin-top: 6rpx;
		margin-left: 30rpx;
	}

	.search-text {
		width: 100%;
		margin-top: 10rpx;
		margin-left: 10rpx;
		font-size: 30rpx;
		color: #7f7f81;
	}

	.search-btn {
		background-color: #00a8cc;
		/* Green */
		color: white;
		text-align: center;
		display: inline-block;
		font-size: 35rpx;
		width: 240rpx;
		height: 70rpx;
		line-height: 65rpx;
		border-radius: 30rpx;
		letter-spacing: 3rpx;
	}

	.swiper {
		width: 95vw;
		height: 190px;
		margin: 0 0px 0 10px;
		border: 0;
	}

	.swiperitem image {
		width: 100%;
		height: 100%;
		margin: 0 0px 0 0px;
		border-radius: 10px;
	}


	.navigation {
		display: flex;
		width: 90%;
		margin: 20px;
	}

	.leftnav {
		display: inline-block;
		width: 46%;
		height: 190px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 5px 0 5px 1px #ccc;
	}

	.looking {
		font-size: 28px;
		color: rgb(63, 181, 189);
		margin: 10px;
	}

	.smallbox {
		float: right;
		margin-right: 10px;
		color: #b4b1ba;
	}

	.img {
		width: 100%;
		height: 100px;
	}

	.img image {
		width: 100%;
		height: 100%;
	}

	.rightnav {
		position: relative;
		display: inline-block;
		width: 50%;
		height: 180px;
		/* background-color: #fff; */
		margin-left: 25px;
		display: inline-block;
		width: 46%;
		height: 190px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 5px 0 5px 1px #ccc;

	}

	.Confessionwall {
		float: right;
		/* display: inline-block; */
		width: 70%;
		font-size: 28px;
		color: rgb(63, 181, 189);
		margin: 10px;
	}

	.leftsmallbox {
		float: right;
		margin-right: 10px;
		/* width: 15px;d */
		font-size: 15px;
		color: #b4b1ba;
		margin: 0 20px;
	}

	.leftimg {
		position: absolute;
		bottom: -20px;
		left: 0;
		/* display: flex; */
		width: 70%;
		height: 150px;
	}

	.leftimg image {
		width: 110%;
		height: 100%;
	}


	.topbox {
		width: 100%;
		height: 48%;
		background-color: #fff;
		margin-bottom: 10px;
		border-radius: 10px;
		box-shadow: 5px 0 5px 1px #ccc;
	}

	.topclassification {
		display: inline-block;
		width: 25%;
		font-size: 33px;
		color: rgb(63, 181, 189);
		margin-left: 10px;
	}

	.middleclassification {
		display: inline-block;
		width: 10%;
		font-size: 10px;
		color: #b4b1ba;

	}

	.bottomclassification {
		display: inline-block;
		width: 40%;
		height: 80%;
		margin: 10px 0 0 22px;
	}

	.bottomclassification image {
		width: 100%;
		height: 100%;
	}

	.bottombox {
		width: 100%;
		height: 50%;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 5px 0 5px 1px #ccc;
	}

	.lefttrading {
		display: inline-block;
		width: 50%;
		font-size: 30px;
		color: rgb(63, 181, 189);
		margin-left: 10px;
	}

	.righttrading {
		display: inline-block;
		width: 40%;
		height: 80%;
		margin-top: 5px;
	}

	.righttrading image {
		width: 100%;
		height: 100%;
		/* margin-top: 10px; */
	}





	.wdith {
		width: 95%;
		margin: 0 auto;
	}

	.goods {
		margin: 10px 15px 0 10px;
	}

	.goodstop {
		margin: 0 0 5px 10px;
	}

	.goodsbox {
		display: grid;
		/* grid-template-columns: repeat(autofill,100px); */
		/* grid-auto-flow: column dense; */
		width: 97vw;
		grid-template-columns: 48% 48%;
		grid-gap: 0.5em;
		height: auto;
	}

	.goodscard {
		display: inline-block;
		/* width: 47%; */
		/* width: 43vw; */
		/* height: 220px; */

		background-color: #fff;
		border-radius: 10px;
		margin-bottom: 3%;
	}

	.goodscard:nth-child(2n) {
		/* width: 9%; */
		/* margin-left: 5%; */
	}

	.cardsimg {
		/* width: 100%; */
		/* height: 80px; */
		/* margin: 10px; */

	}

	.cardsimg image {
		width: 100%;

		border-radius: 10px;
	}

	/* 要改!!! */
	.cardstext {
		width: 100%;
		height: 20px;
		overflow: hidden;
		margin-top: 5px;
		margin-bottom: 5px;
		padding: 3px;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.cardsuser {
		display: inline-block;
		float: right;
		text-align: right;
		padding-right: 5px;
		width: 50%;
		height: 15px;
		margin-left: 5px;
		font-size: 10px;
		color: #b4b1ba;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;

	}

	.price {
		display: inline-block;
		width: 40%;
		height: 20px;
		color: rgb(255, 85, 0);
		font-size: 16px;
		margin-left: 5px;
		/* margin-top: 5px;s */
		white-space: nowarp;
		/*强制在一行显示*/
		overflow: hidden;
		/*溢出隐藏*/
		text-overflow: ellipsip;
		/*溢出显示省略号*/
	}
</style>
